<template>
  <div>
    <van-nav-bar title="金沙雅苑(二期)" left-arrow @click-left="onClickLeft" />
    <van-image width="100%" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    <h2>{{ info.title }}</h2>
    <span>{{ info.tags[0] }}</span>
    <van-divider />
    <div class="box">
      <div class="ome">
        <h3>{{ info.price }}/月</h3>
        <h4>租金</h4>
      </div>
      <div class="ome">
        <h3>{{ info.desc.split("/")[0] }}</h3>
        <h4>房型</h4>
      </div>
      <div class="ome">
        <h3>178</h3>
        <h4>面积</h4>
      </div>
    </div>
    <van-divider />
    <div class="map">
      <h4>小区</h4>
      <img src="../../public/5b71.jpg" alt="" width="100%" />
    </div>
    <h4>房屋配套</h4>
    <van-divider />
    <van-tabbar v-model="active" :fixed="false">
      <van-tabbar-item icon="search">衣柜</van-tabbar-item>
      <van-tabbar-item icon="setting-o">洗衣机</van-tabbar-item>
    </van-tabbar>

    <h4>房源概括</h4>
    <van-divider />
    <van-image
      round
      width="5rem"
      height="5rem"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <div class="text">
      <p>
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </p>
    </div>

    <div class="but">
      <van-button type="default">收藏</van-button>
      <van-button type="default">在线咨询</van-button>
      <van-button type="primary">电话预约</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  data() {
    return {
      info: null,
       active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  async created() {
    console.log(this.$route.query.item);
    this.info = this.$route.query.item;
  },
};
</script>

<style scoped lang="less">
.box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.but {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
}
.van-button {
  flex: 1;
}
.text {
  margin-bottom: 20%;
}
</style>
